<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title th:text="${#session.getAttribute('title')}">Title</title>
    <link th:href="@{/css/user/me.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <link th:href="@{/css/footer.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/jquery-1.10.1.min.js}" type="text/javascript"></script>
    <link th:href="@{/webcss/bootstrap.css}" rel="stylesheet" type="text/css" media="screen,print"/>
    <script th:src="@{/webjs/bootstrap.js}" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
          integrity="sha384-..." crossorigin="anonymous">
</head>
<body>
<div class="container mt-5 d-flex flex-column align-items-center justify-content-center">
    <h2 class="mb-4">修改密码</h2>
    <br><br>
    <!-- 表单部分 -->
    <form id="passwordForm" class="d-flex flex-column align-items-center">
        <!-- 输入框部分 -->
        <div class="mb-3 w-100">
            <label for="originalPassword" class="form-label">原密码</label>
            <input type="password" class="form-control" id="originalPassword" placeholder="请输入原密码">
        </div>
        <br><br>
        <div class="mb-3 w-100">
            <label for="newPassword" class="form-label">新密码</label>
            <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码">
        </div>
        <br><br>
        <div class="mb-3 w-100">
            <label for="confirmNewPassword" class="form-label">确认新密码</label>
            <input type="password" class="form-control" id="confirmNewPassword" placeholder="请再次输入新密码">
        </div>
        <!-- 提交按钮 -->
        <br><br>
        <div class="button-container d-flex justify-content-between w-100">
            <!-- 确认按钮 -->
            <button type="button" id="submitBtn" class="btn btn-primary">确认更改</button>
            <!-- 重置按钮 -->
            <button type="button" id="resetBtn" class="btn btn-primary">重置</button>
            <!-- 退出按钮 -->
            <button type="button" id="logoutBtn" class="btn btn-primary">退出</button>
        </div>
    </form>
    <!-- 自定义警告区域 -->
    <div id="customAlert"></div>
</div>
<footer class="footer fixed-bottom">
    <div class="footer-links d-flex justify-content-center">
        <a href="toIndex" class="footer-link"><i class="fas fa-trophy"></i> 排行榜</a>
        <a href="toRecord" class="footer-link"><i class="fas fa-history"></i> 积分记录</a>
        <a href="toUpdate" class="footer-link active"><i class="fas fa-user"></i> 修改密码</a>
    </div>
</footer>
</body>
<script>
    $('#resetBtn').click(function () {
        $('#originalPassword').val('');
        $('#newPassword').val('');
        $('#confirmNewPassword').val('');
    });
    $('#logoutBtn').click(function () {
        $.ajax({
            url: '/logout', // 修改为你的后端接口地址
            type: 'POST',
            success: function (response) {
                // 显示自定义提示信息并设置2秒后自动消失
                if (response === true) {
                    $("#customAlert").text("请重新登录").show();
                    // 禁止页面点击
                    $('body').css('pointer-events', 'none');
                    setTimeout(function () {
                        // 3秒后提示消失，允许页面点击，并刷新页面
                        $("#customAlert").fadeOut('slow', function () {
                            $('body').css('pointer-events', 'auto');
                            window.location.href = ''; // 跳转到登录页面
                        });
                    }, 1000);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('发生错误: ' + textStatus + ' ' + errorThrown);
            }
        });
    });
    $(document).ready(function () {
        $('#submitBtn').click(function () {
            var originalPassword = $('#originalPassword').val();
            var newPassword = $('#newPassword').val();
            var confirmNewPassword = $('#confirmNewPassword').val();

            if (!originalPassword || !newPassword || !confirmNewPassword) {
                alert('请确保所有字段都已填写');
                return false;
            }

            if (newPassword !== confirmNewPassword) {
                alert('新密码和确认密码不一致');
                return false;
            }

            $.ajax({
                url: '/updatePassword', // 修改为你的后端接口地址
                type: 'POST',
                data: {
                    oldPassword: originalPassword,
                    newPassword: newPassword
                },
                success: function (response) {
                    // 显示自定义提示信息并设置2秒后自动消失
                    if (response === true) {
                        $("#customAlert").text("密码更改成功，请重新登录").show();
                        // 禁止页面点击
                        $('body').css('pointer-events', 'none');
                        setTimeout(function () {
                            // 3秒后提示消失，允许页面点击，并刷新页面
                            $("#customAlert").fadeOut('slow', function () {
                                $('body').css('pointer-events', 'auto');
                                window.location.href = 'toLogin'; // 跳转到登录页面
                            });
                        }, 2000);
                    } else {
                        $("#customAlert").text("请确认原密码是否正确").show();
                        // 禁止页面点击
                        $('body').css('pointer-events', 'none');
                        setTimeout(function () {
                            // 3秒后提示消失，允许页面点击，并刷新页面
                            $("#customAlert").fadeOut('slow', function () {
                                $('body').css('pointer-events', 'auto');
                            });
                        }, 2000);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('发生错误: ' + textStatus + ' ' + errorThrown);
                }
            });
        });
    });
</script>
</html>